       /**
        *  参数:
        *     obj: 要执行动画的对象
        *     attr: 要执行的动画的样式
        *     target: 执行动画的 
        *     speed: 移动的速度(正数向右移动, 负数向左移动)
        *     callback: 回调函数, 这个函数将会在动画执行完毕以后执行
        */

       //尝试创建一个可以执行简单动画的函数
       function move(obj, attr, target, speed, callback){
        //关闭上一个定时器
        clearInterval(obj.timer);

         //获取元素目前的位置
         var current = parseInt(getStyle(obj, attr));


         //判断速度的正负
         //如果从0向800移动, 则speed为正
         //如果从800向0移动, 则speed为负
         if(current > target){
             //此时速度应为负值
             speed = -speed;
         }


             //让box1向右移动 
             //开启一个定时器, 用来执行动画效果
              obj.timer = setInterval(function(){
             
                 //获取box1原来的left值
                 var oldValue = parseInt(getStyle(obj, attr));
             
                 //在旧值得基础上增加
                 var newValue = oldValue + speed;
             
                 // 判断newValue是否大于800
                 //从800向0移动
                 //向左移动时, 需要判断newValue是否小于target
                 if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
                     newValue = target;
                 }//else{
                 //     newValue = 800;
                 
                 // }
                 
                 //将新值设置给box1
                 obj.style[attr] = newValue + "px";
                 
                 //当元素移动到0px时, 使其停止执行动画
                 if(newValue == target){
                     //到达目标, 关闭定时器
                     clearInterval(obj.timer);

                     //动画执行完毕, 调用回调函数
                     callback && callback();
                 }
             
             },30)
    };


     
     function getStyle(obj, name){

             // if(window.getComputedStyle){
             //     // 正常浏览器的方式, 具有getComputedStyle()方法 
             //     return getComputedStyle(obj, null)[name];
             // }else{
             //     //IE8的方式, 没有getComputedStyle()方法
             //     return obj.currentStyle[name];
             // };
             
             // if(confirm("是IE浏览器吗?")){
             //     //IE8的方式
             //     return obj.currentStyle[name];
             // }else{
             //      // 正常浏览器的方式
             //      return getComputedStyle(obj, null)[name];
             // }
             
             if(obj.currentStyle){
                 return obj.currentStyle[name];
             }else{
                 return getComputedStyle(obj, null)[name];
             }

             return window.getComputedStyle?getComputedStyle(obj, null)[name]:obj.currentStyle[name];

     }

     //定义一个函数, 用来向一个元素中添加指定的class属性值
        /**
         *  参数:
         *    obj 要添加class属性的元素 
         *    cn 要添加的class值
         */
         function addClass(obj, cn){

            //检查obj中是否含有cn
            if(!hasClass(obj, cn))
            obj.className += " " + cn;

        };

        /**
         *  判断一个元素中是否含有指定的class属性值 
         *    如果有该class, 则返回true, 没有则返回false
         */
        function hasClass(obj, cn){

            //判断obj中有没有cn class
            //创建一个正则表达是
            // var reg = /\b2\b/;
            var reg = new RegExp("\\b"+ cn +"\\b");
 
            return  reg.test(obj.className);
        };

        /**
         *  删除一个元素中指定的class属性 
         */
        function removeClass(obj, cn){
            // 创建一个正则表达式
            var reg = new RegExp("\\b"+ cn +"\\b");

            // 删除class
            obj.className = obj.className.replace(reg, "");

        }

        /**
         *  toggleClass可以用来切换一个类
         *   如果元素中具有该类, 则删除
         *   如果元素中没有该类, 则添加 
         */
        function toggleClass(obj, cn){

            //判断obj中是否含有cn
            if(hasClass(obj, cn)){
                //有, 则删除
                removeClass(obj, cn);
            }else{
                //没有, 则添加
                addClass(obj, cn);
            }

        }